<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="lyndonfn" uri="http://github.com/lyndon/tags/lyndon-functions" %>
<html>
<head>
    <title></title>
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/css/metroStyle/metroStyle.css">
    <style>
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:500px;overflow-y:scroll;overflow-x:auto;}
    </style>

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/static/alert/jquery-confirm.min.css" />
<!--[if !IE]> -->
<script src="<%=request.getContextPath()%>/ace/assets/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->
<script src="<%=request.getContextPath()%>/static/alert/jquery-confirm.min.js"></script>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/static/jquery-validate/css/form.css" />
</head>
<body>
	
	<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>
					员工管理
				</h1>
			</div>
			<!-- /.page-header -->
			<c:if test="${not empty msg}">
				<div id="myAlert" class="alert alert-warning">
					<a href="#" class="close" data-dismiss="alert">&times;</a>
					<strong>警告！</strong>${msg }。
				</div>
			</c:if>
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					
						 <form:form id="form" method="post" commandName="user" class="form-horizontal">
					        <form:hidden path="id"/>
					        <form:hidden path="salt"/>
					        <form:hidden path="locked"/>
					        <form:hidden path="organization_id"/>
					
					        <c:if test="${op ne '新增'}">
					            <form:hidden path="password"/>
					        </c:if>
					        <c:if test="${op eq '新增'}">
					        <div class="form-group">
					            <form:label path="username" class="col-sm-3 control-label no-padding-right">用户名：</form:label>
					            <form:input path="username" required="true" placeholder="请填写手机号"  class="col-xs-10 col-sm-5"/>
					        </div>
					        </c:if>
					        <c:if test="${op eq '修改'}">
					        <fieldset disabled>
						        <div class="form-group">
						            <form:label path="username" class="col-sm-3 control-label no-padding-right">用户名：</form:label>
						            <form:input path="username" required="true" placeholder="请填写手机号"  class="col-xs-10 col-sm-5"/>
						        </div>
					        </fieldset>
					        </c:if>
					
					        <c:if test="${op eq '新增'}">
					            <div class="form-group">
					                <form:label path="password" class="col-sm-3 control-label no-padding-right">密码：</form:label>
					                <form:password path="password" required="true" class="col-xs-10 col-sm-5"/>
					            </div>
					        </c:if>
							<fieldset disabled>
						        <div class="form-group">
						            <form:label path="organization_id" class="col-sm-2 control-label">所属组织：</form:label>
						            <div class="col-sm-8">
							            <input type="text" id="organizationName" class="col-xs-10 col-sm-5" name="organizationName" value="${lyndonfn:organizationName(user.organization_id)}" placeholder="所属部门">
							            <a id="menuBtn" href="#">选择</a>
						            </div>
						        </div>
							</fieldset>
					
					        <div class="form-group">
					            <form:label path="role_ids" class="col-sm-3 control-label no-padding-right">角色列表：</form:label>
					            <%-- <form:select path="role_ids" items="${roleList}" itemLabel="description" itemValue="id" multiple="true"/>
					            (按住shift键多选) --%>
					            <div id="rolebox" class="col-sm-9">
						            <table>  
						        		<tr>
								            <c:forEach items="${roleList }" var="role">
								        			<td>
								        				<label class="checkbox-inline">
								        					<input type="checkbox" name="role_ids" value="${role.id }" />${role.role } 
								        				</label>
								        			</td>
								            </c:forEach>
						        		</tr>
						        	</table>
					        	</div>
					        </div>
					        <form:button class="btn btn-info col-md-offset-3">${op}</form:button>
					
					    </form:form>
					
					
					    
											
					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
   	<!-- 部门树菜单 -->
   	<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="tree" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>
    <script src="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/js/jquery.ztree.all-3.5.min.js"></script>
    <script>
        $(function () {
            var setting = {
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                }
            };

            var zNodes =[
                <c:forEach items="${dataDeptList}" var="o">
                    <c:if test="${not o.rootNode}">
                        { id:${o.id}, pId:${o.parent_id}, name:"${o.name}",open:${o.rootNode}},
                    </c:if>
                </c:forEach>
            ];

            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getSelectedNodes(),
                        id = "",
                        name = "";
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                    name += nodes[i].name + ",";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                if (name.length > 0 ) name = name.substring(0, name.length-1);
                $("#organization_id").val(id);
                $("#organizationName").val(name);
                $.get("${pageContext.request.contextPath}/role/select/"+id,function(data,status){
                	var h = ""
        			for(var p in data){//遍历json对象的每个key/value对,p为key
		        		
		        		var td ="<td>"
        							+"<label class='checkbox-inline'>"
        							+"<input type='checkbox' name='role_ids' value="+data[p].id+" />"+data[p].role+""
        							+"</label>"
        							+"</td>"
		        		
	        			h+=td;
        			}
                	$("#rolebox").html(h);
                  });
                hideMenu();
            }

            function showMenu() {
                var cityObj = $("#organizationName");
                var cityOffset = $("#organizationName").offset();
                $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

                $("body").bind("mousedown", onBodyDown);
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }

            var treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
            treeObj.expandAll(true);
            $("#menuBtn").click(showMenu);
        });
        
        
        var boxObj = $("input:checkbox[name='role_ids']"); //获取所有的复选框值  
        var expresslist = '${user.role_ids}'; //用el表达式获取在控制层存放的复选框的值为字符串类型  
        var express = expresslist.split(',');  
        $.each(express, function(index, expressId){  
           boxObj.each(function () {  
                if($(this).val() == expressId) {  
                   $(this).attr("checked",true);  
                }  
            });  
        }); 
    </script>

</body>
<script type="text/javascript">
		$().ready(function() {
			  $("#form").validate({
				  	debug:true,
				    rules: {
				    	username : {
				             required :true
				         },
				         organizationName :required,
				         role_ids：required
				    	
				   },
				   messages: {
			        	 username : {
			                 required : "请填写用户名"
			             }
				   		organizationName :"请选择所属组织",
				   		role_ids："请选择角色"
				   }
			  });
			 });
		</script>
<script src="<%=request.getContextPath()%>/static/jquery-validate/js/jquery.validate.js" type="text/javascript"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</html>